<template>
    <div class="page" id="table">   
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">返回</span>
                    </a>
                </div>
                <div class="title">表格</div>
            </div>
        </div>  
        <div class="page-content">
            <div class="row no-gap">
                <div class="col-100"><input type="text" placeholder="请选择日期" readonly="readonly" id="demo-calendar-default3"/></div>
            </div>
            <div class="data-table data-table-init card">
                <table>
                    <thead>
                        <tr>
                            {{#each header}}
                                <th class="label-cell">{{this}}</th>
                            {{/each}}
                        </tr>
                    </thead>
                    <tbody>
                        {{#each body}}
                            <tr>
                                {{#each this}}
                                <td {{#if this}}class="active"{{/if}} class="label-cell">{{this}}</td>
                                {{/each}}
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>    
    </div>
  </template>
<style>
    .page {
        /* padding-top: 44px; */
    }
    
    .active {
        color: green;
    }
</style>
<script>
    return {
        created() {
            // console.log('componentCreated', this)
        },
        mounted() {
            // console.log('componentMounted', this);
            var self = this
            setTimeout(function() {
                self.$setState({
                    body: [
                        ["A_长沙", -21730, 89220, 44572, 55339, 55339, 3944, 50539],
                        ["B_岳阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                        ["C_湘潭", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                        ["D_株洲", 217304, 82920, 46572, 5539, 55339, 3944, 50539],
                        ["G_常德", 21730, 89220, 44572, 55339, 55339, 3944, 50539],
                        ["H_益阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                        ["I_娄底", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                    ]
                })
            }, 500);
            var calendarDefault3 = app.calendar.create({
                inputEl: '#demo-calendar-default3',
            });
            $$("#demo-calendar-default3").on("change", function(e) {
                //获取input输入的值
                console.log(e.target.value);
            });
        },
        beforeDestroy() {
            // console.log('componentBeforeDestroy', this);
        },
        // Component Data
        data: function() {
            // Must return an object
            return {
                header: ["地市", "指标1", "指标2", "指标3", "指标4", "指标5", "指标6", "指标7"],
                body: [
                    ["A_长沙", -21730, 89220, 44572, 55339, 55339, 3944, 50539],
                    ["B_岳阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                    ["C_湘潭", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                    ["D_株洲", 217304, 82920, 46572, 5539, 55339, 3944, 50539],
                ],
            }
        },
        // Component Methods
        methods: {
            // openAlert: function() {
            //     var self = this;
            //     self.$app.dialog.alert('Hello World');
            // },
        },
        // Page Events
        on: {
            // pageInit: function(e, page) {
            //   console.log('pageInit', page);
            // },
        }
    }
</script>